<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>番茄钟</title>
<script type="text/javascript"
	src="./jquery-3.3.1.min.js"></script>
	
<script type="text/javascript"
	src="./jquery.fireworks2.js"></script>

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<style type="text/css">
.bg{
	background-image:url(./timg.jpg);
	background-repeat:no-repeat;
	background-size:100% 100%; 
	background-attachment: fixed;
}

.alertBg{
	background-color: #31b0d5;
}

.bt-text{
	font-size:3em;
}

.btn-set{
	width: 60%;
	font-size: 2em;
   	margin-top: 1em;
}

.btn-set:hover{
	font-size: 1.5em;
   	border-width: 0.5em;
}

.modal-dialog-height{
	padding: 7%;
}
 .modal-content-height{
	height:100%;
}

.md-title{
	font-size: 1.2em;
    color: wheat;
}

.btn-set2{
	font-size: 1em;
   	margin-top: 1em;
}

.btn-sure{
	font-size: 1.25em;
   	margin-top: 0.5em;
   	margin-bottom: 0.5em;
}

.modal-body-text2{
	text-align: center;
    font-size: 1.5em;
}

.btn-set3{
	font-size: 1.55em;
   	margin-top: 0.7em;
}

.modal-body-text3{
	text-align: center;
    font-size: 1.5em;
    line-height: 3em;
}

.modal-body-text4{
	text-align: center;
    font-size: 1.5em;
    height: 40%;
    line-height: 1.7em;
}

.modal-footer-height{
	text-align: center; 
	margin-bottom: 2em;
	
}

</style>
</head>
<body class="bg">
		<div id="content" class="container-fluid">
			<div class="row">
				<div id="time" style="text-align:center;font-size:8em;"><span>0</span></div>		
			</div>
			
			<div class="row">
				<div class="col-xs-12" style="text-align: center;">
					<button onclick="timeOut()" type="button" class="btn btn-success  btn-set2"><span class="bt-text">暂停</span></button>
				</div>
			</div>
			<br>
			<div class="row">
				<div class="col-xs-12" style="text-align: center;">	
					<button onclick="finished()" type="button" class="btn btn-info  btn-set2"><span class="bt-text">完成</span></button>
				</div>
			</div>
			
			<br>
			<div class="row">
				<div class="col-xs-12" style="text-align: center;">	
					<button onclick="reset()" type="button" class="btn btn-warning  btn-set2"><span class="bt-text">重置</span></button>
				</div>
			</div>
			
			<div class="row">
				<div class="col-xs-12" style="text-align: center;">
				<button id="myRecord" type="button" class="close" data-dismiss="alert" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>			
				</div>
			</div>
		</div>
		
		<div id="timeSet" class="modal fade" tabindex="-1" role="dialog">
		  <div class="modal-dialog modal-dialog-height" role="document" >
			<div class="modal-content modal-content-height">
			  <div class="modal-header alertBg">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title md-title">陈啸,请选择完成任务需要的时间</h4>
			  </div>
			  <div class="modal-body" style="text-align: center;">	
		  			<div class="row">
				  		<div class="col-xs-12" >
							<button type="button"  class="btn btn-success btn-set" onclick="setChooseMin(2)">2分钟</button>			  		
				  		</div>
				  	</div>
				  	
				  	<div class="row">
				  		<div class="col-xs-12">
							<button type="button"  class="btn btn-info btn-set" onclick="setChooseMin(5)">5分钟</button>	  		
				  		</div>
				  	</div>
				  	
				  	<div class="row">
				  		<div class="col-xs-12">
							<button type="button"  class="btn btn-warning btn-set" onclick="setChooseMin(10)">10分钟</button>		  		
				  		</div>
				  	</div>
				  	
				  	<div class="row">
				  		<div class="col-xs-12">
							<button type="button"  class="btn btn-danger btn-set" onclick="setChooseMin(30)">30分钟</button>	  		
				  		</div>
				  	</div>
			  </div>
			  <div class="modal-footer" style="text-align: center;">
			  	<div class="row">
			  		<div class="col-xs-12">
					  	<button type="button" class="btn btn-primary btn-sure" onclick="startChooseMin()" >确认</button>			  				  	
				  	</div>
			  	</div>
			  </div>
			</div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->		
		
		<div id="result" class="modal fade" tabindex="-1" role="dialog">
		  <div class="modal-dialog modal-dialog-height" role="document">
			<div class="modal-content modal-content-height">
			  <div class="modal-header alertBg">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title md-title">时间到！！！</h4>
			  </div>
			  <div class="modal-body modal-body-text2">
				<p><b>陈啸</b><br>完成任务了么<br>请诚实面对自己</p>
			  </div>
			  <div class="modal-footer"  style="text-align: center;">
			  	<div class="row">
			  		<div class="col-xs-12" >
						<button type="button" class="btn btn-success btn-set3" data-dismiss="modal" onclick="done()" >完成了<br>开心</button>			  		
			  		</div>
			  	</div>
			  	
			  	<div class="row">
			  		<div class="col-xs-12">
						<button type="button" class="btn btn-warning btn-set3" onclick="almost()">还差一点</button>			  		
			  		</div>
			  	</div>
			  	
			  	<div class="row">
			  		<div class="col-xs-12" style="padding-bottom:1em">
						<button type="button" class="btn btn-danger btn-set3" onclick="muchToDo()">我错了<br>错误地<br>估计了形势</button>			  		
			  		</div>
			  	</div>
			  	
			  </div>
			</div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		
		
		<div id="result_good" class="modal fade" tabindex="-1" role="dialog">
		  <div class="modal-dialog modal-dialog-height" role="document">
			<div class="modal-content modal-content-height">
			  <div class="modal-header alertBg">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title md-title">保守点评</h4>
			  </div>
			  <div class="modal-body modal-body-text3" >
				<span id="result_msg"></span>
			  </div>
			  <div class="modal-footer modal-footer-height">
				<button type="button" class="btn btn-success btn-set" onclick="closeMyself('result_good')"><span id = "result_msg_button"></span></button>
			  </div>
			</div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		
		<div id="result_ok" class="modal fade" tabindex="-1" role="dialog">
		  <div class="modal-dialog modal-dialog-height" role="document">
			<div class="modal-content modal-content-height">
			  <div class="modal-header alertBg">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title md-title">加把劲</h4>
			  </div>
			  <div class="modal-body modal-body-text4">
				<p><b>陈啸</b><br>继续吧<br>再给你两分钟</p>
			  </div>
			  <div class="modal-footer modal-footer-height">
				<button type="button" class="btn btn-warning btn-set" onclick="closeMyself('result_ok')">恩恩<br>我很乖的</button>
			  </div>
			</div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		
		
		<div id="result_bad" class="modal fade" tabindex="-1" role="dialog">
		  <div class="modal-dialog modal-dialog-height" role="document">
			<div class="modal-content modal-content-height">
			  <div class="modal-header alertBg">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title md-title">只想你快乐</h4>
			  </div>
			  <div class="modal-body modal-body-text3">
				<p><b>陈啸</b><br>放弃吧，别挣扎了</p>
			  </div>
			  <div class="modal-footer modal-footer-height">
				<button type="button" class="btn btn-danger btn-set" onclick="closeMyself('result_bad')">容我想想</button>
			  </div>
			</div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		
		<!-- 蒙版弹窗效果（图片放大） -->
		<div id="fire" onclick="stopFire()"  style="display: none; width: 100%;height:100%;background-color:rgba(0,0,0,0.8)" class="navbar-fixed-top">
		</div>
		
		
</body>
<script>


var fireObject = null;

function startFire(){
	$('#fire').show();
	fireworks();
}

function fireworks() {
	fireObject = $('#fire').fireworks({ 
	  sound: true, 
	  opacity: 0.9, 
	  width: '100%', 
	  height: '100%' 
	});	
}

var index = 0;
function stopFire(){
		
		if(index < 3){
			index = index + 1;
			return;
		}else{
			index = 0;
		}
		
		
		$('#fire').hide();
		fireObject.stop();
}

var modalOptions = {backdrop: 'static', keyboard: false}; 

function showTimeSet(){
	$('#timeSet').modal(modalOptions);
}

showTimeSet();

var time = document.getElementById("time");

var seconds = 0;
var isTimeOut = false;
var isFinished = false;
var result = null;

function stopCheck(){
	clearInterval(result);
}

function timeOut(){
	isTimeOut = !isTimeOut;
	
	if(isTimeOut){
		audio2.pause();		
	}else{
		audio2.play();
	}
}

function finished(){
	isFinished = true;
}

function stopSound(){
	$("#result").modal(modalOptions);
}

var resultMsg = document.getElementById("result_msg");
var resultMsgButton =  document.getElementById("result_msg_button");

function done(){
	closeResult();
	resultMsg.innerHTML = "<b>陈啸</b><br>你真他妈的优秀";
	resultMsgButton.innerHTML = "一般一般<br>东厂第三";
	$("#result_good").modal(modalOptions);
}

function closeSound(){
	audio2.pause();
}

function reset(){
	isFinished = false;
	isTimeOut = false;
	stopCheck();
	closeSound();
	seconds = 0;
	time.innerText = "0:00";
	showTimeSet();
}

function closeMyself(id){	
	$('#'+id).modal("hide");
	
	if(id == "result_ok"){
		timeSet(2);
	}else if(id == "result_bad"){
		
	}else if(id == "result_good"){
		startFire();
	}
}

function almost(){
	closeResult();
	$("#result_ok").modal(modalOptions);
}

function muchToDo(){
	closeResult();
	$("#result_bad").modal(modalOptions);
}

function closeResult(){
	closeSound();
	$("#result").modal("hide");
	$("#myRecord").alert();
} 

var chooseMin = 5;
function setChooseMin(chooseM){
	chooseMin = chooseM;
}

function startChooseMin(){
	timeSet(chooseMin);
	chooseMin = 5;
}

var audio2 = document.createElement('audio');
audio2.loop="loop";

function timeSet(min){
	if(min){
	}else{
		min = $("#objTime").val();	
	}
	seconds = min*60;
	
	audio2.src = "./second.mp3"
	audio2.play();
	
	result = setInterval(function(){
		if(isTimeOut){
			audio2.pause();
			return;
		}
		
		if(isFinished){
			audio2.pause();
			stopCheck();
			done();
			time.innerText = "0:00";
			resultMsg.innerHTML = "<b>陈啸</b><br>你太他妈优秀了<br>竟然提前完成任务";
			resultMsgButton.innerHTML = "淡定淡定<br>一直优秀";
			return;
		}
		
		if(seconds > 0){
			seconds = seconds -1;	
			
			time.innerText = transert2Mmss(seconds);
		}else{
			playOverSound(audio2);
			
			stopCheck();
			
			stopSound();
		}
	},1000);
	
	$('#timeSet').modal('hide')  
}
function playOverSound(audio2){
	audio2.src = "./stop.mp3";
	audio2.play();
}

function transert2Mmss(second){
	var secs = second%60;
	
	var min = Math.ceil(second/60);	
	if(min > 0 && secs != 0){
		min = min -1;
	}
	
	if(secs < 10){
		secs = '0' + secs;
	}
	
	return min+":"+secs;
}

</script>
</html>
